<template>
	<div class="search-contain">
		<header class="layout cxo-red">
			<i class="iconfont icon-zuo fs50rem ml30rem white" @click="$router.back(-1)" v-if="showApp !='1'"></i>
			<search-bar class="flex_1 pb10 pt10 cxo-red" v-model="value" :autofocused="true"></search-bar>
		</header>
		<div class="pt30rem pr30rem pb30rem pl30rem">
			<ul class="pl30rem pr30rem pb40rem shop-list layout flex-w">
				<router-link 
					tag="li"
					class="mt40rem"
					v-for="item in goods_list" 
					:key="item.goods_id" 								
					:to=" '/detail/experience-detail/' + item.goods_id + '?status=2'" 
					v-if="item.booking_type == 1"
				>
					<img 
						v-lazy="img_url + item.pic_cover_mid" 				
						class="responsive-img" 
						alt="商品图片"
					>
					<p class="mt20rem fs30rem c333 bold ellipsis-more height-3r">
						{{ item.goods_name }}
					</p>
					<div class="layout mt15rem mb30rem height-1r" >
						<span class="fs24rem c666" v-if="item.booking_type == 1">
							送出{{ item.sales }}份
						</span>
						<span class="fs24rem c666" v-if="item.booking_type == 1">
							已有{{ item. shares }}人预约
						</span>
					</div>
					<p>
						<strong class="mr5rem fs34rem red">
						￥{{ item.price }}
						</strong>
						<i class="red fs16rem experience">
							体验价
						</i>
					</p>					
					<del class="fs20rem c999">
						原价:{{ item.market_price }}元
					</del>
					<button
						class="mt25rem w100 pt20rem pb20rem bg-red white fs28rem bold">
						预约体验
					</button>
				</router-link>
				<router-link 
					tag="li"
					class="mt40rem"
					v-for="item in goods_list" 
					:key="item.goods_id" 								
					:to=" '/ordering/detail/commodity-detail/' + item.goods_id"
					v-if="item.booking_type == 2"
				>
					<img 
						v-lazy="img_url + item.pic_cover_mid" 				
						class="responsive-img" 
						alt="商品图片"
					>
					<p class="mt20rem fs30rem c333 bold ellipsis-more height-3r">
						{{ item.goods_name }}
					</p>
					<div class="mt15rem mb30rem height-1r">

					</div>
					<p>
						<strong class="mr5rem fs34rem red">
						￥{{ item.price }}
						</strong>
					</p>					
					<del class="fs20rem c999">
						原价:{{ item.market_price }}元
					</del>
					<button
						class="mt25rem w100 pt20rem pb20rem bg-red white fs28rem bold">
						预约中
					</button>
				</router-link>
				<router-link 
					tag="li"
					class="mt40rem"
					v-for="item in goods_list" 
					:key="item.goods_id" 								
					:to=" '/mall/mall-detail/' + item.goods_id"
					v-if="item.booking_type == 3"
				>
					<img 
						v-lazy="img_url + item.pic_cover_mid" 				
						class="responsive-img" 
						alt="商品图片"
					>
					<p class="mt20rem fs30rem c333 bold ellipsis-more height-3r">
						{{ item.goods_name }}
					</p>
					<p>
						<strong class="mr5rem fs34rem red">
						￥{{ item.price }}
						</strong>
					</p>					
					<del class="fs20rem c999">
						原价:{{ item.market_price }}元
					</del>
				</router-link>
			</ul>
		</div>		
	</div>
</template>

<script>
	
	import { searchName } from'@/api/search';
	import { Lazyload }   from 'mint-ui';
	import SearchBar      from '@/components/Search-bar';
	import $toast   	  from '@/utils/toast';
	import Vue from "vue";
	Vue.use(Lazyload);

	export default{
		components:
		{
			SearchBar
		},
		data()
		{
			return{
				value : '',
				img_url: process.env.IMG_URL,
				showApp : this.$route.query.isiOS,
				goods_list: [],
			}
		},
		methods:
		{
			loadData(search_name)
			{
				searchName(search_name).then( res => {
					if(res.data.length == 0)
						$toast('找不到这个内容~');
					else
						this.goods_list = res.data;
				});
			}
		},
		watch:{
			value()
			{
				this.loadData(this.value);
			},
		},
		created()
		{
			if(this.$route.query.searchName){
				let searchName = this.$route.query.searchName;
				this.loadData(searchName);
			}
		}
		
	}
</script>

<style lang="less">
	.search-contain{
		.shop-list{
			overflow: hidden;
		    li{
		    	width: 48%;
		    	button{
		    		border-radius: 10/28rem;
		    	}
		    	.experience{
		    		border-radius: 5/28rem;
		    		background-color: #ffdee5;
		    		padding:2/28rem 5/28rem;
		    		vertical-align: top;
		    	}
		    	img{
		    		height: 360/28rem;
		    	}
		    	.height-1r{
		    		height: 1rem;
		    	}
		    	.height-3r{
		    		height: 3rem;
		    	}
		    }
		}
	}
</style>